<template>
	<view class="content">
		<view v-for="(item,index) in orderItems" :key="index" class="item">
			<view>
				<image :src="item.image" class="image-150" mode="aspectFill" lazy-load></image>
				<view class="order-item">
					<view class="text_one product-name">{{item.productName}}</view>
					<view class="text_one sku-font">{{item.skuName}}</view>
				</view>
			</view>
			<view class="comment-position">
				<view class="pj-font">
					整体评价
				</view>
				<view class="level-view">
					<view class="level-item" v-for="(it,i) in options" :key="i" @tap="active(index,i)">
						<image v-if="i!=item.level" :src="it.icon" class="level-icon"></image>
						<image v-if="i==item.level" :src="it.activeIcon" class="level-icon"></image>
						<view v-if="i!=item.level" class="level-font">{{it.title}}</view>
						<view v-if="i==item.level" class="level-active-font">{{it.title}}</view>
					</view>
				</view>
			</view>
			<textarea v-model="item.comment" placeholder="亲,收到商品?有什么想说的?分享给其他用户?" style="height: 250upx;margin-top: 20upx;"></textarea>
			<image src="../../static/img/upload.png" class="upload-icon" mode="widthFix" @tap="uploadImage(index)" v-if="item.commentImage==''"></image>
			<view class="image-view" v-if="item.commentImage!=''">
				<image :src="item.commentImage" class="comment-image" mode="aspectFill" @tap="preview(index)"></image>
				<view @tap.stop="delImage(index)" class="del">-</view>
			</view>
		</view>
		<view @tap="comment()" class="fabu">发布</view>
	</view>
</template>

<script>
	import api from "../../common/api.js";
	import {
		getWithParam_,
		postJson
	} from "../../common/request.js";
	export default {
		data() {
			return {
				orderItems: [],
				orderId: "",
				options: [{
						title: "好评",
						icon: "../../static/icon/pl3.png",
						activeIcon: "../../static/icon/pl4.png"
					},
					{
						title: "中评",
						icon: "../../static/icon/pl1.png",
						activeIcon: "../../static/icon/pl2.png"
					}, {
						title: "差评",
						icon: "../../static/icon/pl1.png",
						activeIcon: "../../static/icon/pl2.png"
					}
				]
			}
		},
		onLoad(option) {
			this.orderId = option.id
			this.initData(option.id)
		},
		methods: {
			comment() {
				var params = {}
				params.orderId = this.orderId
				params.commentItems = []
				for (var i = 0; i < this.orderItems.length; i++) {
					var s = {}
					s.orderItemId = this.orderItems[i].id
					s.content = this.orderItems[i].comment
					s.image = this.orderItems[i].commentImage
					s.level = this.orderItems[i].level
					params.commentItems.push(s)
				}
				postJson(api.ORDER_COMMENT, params).then(res => {
					uni.navigateTo({
						url: "./commentSuccess?orderId=" + this.orderId
					})
				})
			},
			preview(index) {
				var arr = []
				arr.push(this.orderItems[index].commentImage)
				uni.previewImage({
					urls: arr
				})
			},
			delImage(index) {
				this.orderItems[index].commentImage = ''
			},
			uploadImage(index) {
				uni.chooseImage({
					count: 1,
					sizeType: ["compressed"],
					sourceType: ["album"],
					success: (res) => {
						let token = uni.getStorageSync("token")
						uni.uploadFile({
							url: this.$baseUrl + api.UPLOAD,
							filePath: res.tempFilePaths[0],
							name: "file",
							header: {
								"token": token
							},
							success: (resp) => {
								var result = JSON.parse(resp.data);
								if (result.code == 2000) {
									this.orderItems[index].commentImage = result.data
								} else {
									uni.showToast({
										icon: "none",
										title: result.message
									})
								}
							}
						})
					}
				})
			},
			active(index, index1) {
				this.orderItems[index].level = index1
			},
			initData(id) {
				getWithParam_(api.ORDER_GET_COMMENT, {
					id
				}).then(res => {
					if (res.data != null) {
						var arr = res.data.items;
						for (var i = 0; i < arr.length; i++) {
							arr[i].comment = '';
							arr[i].commentImage = ''
							arr[i].level = 0;
						}
						this.orderItems = arr
					}
				})
			}
		}
	}
</script>

<style>
	.comment-image {
		height: 100%;
		width: 100%;
	}

	.upload-icon {
		width: 150upx;
		margin-left: 40upx;
	}

	.level-active-font {
		color: #fb0746;
		margin-left: 20upx;
	}

	.level-font {
		color: #8a8a8a;
		margin-left: 20upx;
	}

	.level-icon {
		width: 50upx;
		height: 50upx;
	}

	.level-item {
		flex: 1;
		justify-content: center;
		align-items: center;
	}

	.level-view {
		margin-left: 30upx;
		flex: 1;
	}

	.pj-font {
		font-size: 30upx;
		font-weight: 800;
		color: #333333;
	}

	.comment-position {
		align-items: center;
		margin-top: 20upx;
	}

	.product-name {
		color: #333333;
	}

	.padding-bottom {
		padding-bottom: 30upx;
	}

	.sku-font {
		color: #555555;
		font-size: 24upx;
		margin-top: 10upx;
	}

	.order-item {
		flex-direction: column;
		width: 400upx;
		margin-left: 30upx;
	}

	.image-150 {
		width: 150upx;
		height: 150upx;
	}

	.item {
		padding: 20upx;
		flex-direction: column;
		background-color: #FFFFFF;
		box-sizing: border-box;
		border-bottom: 3upx solid #F2F3F5;
	}

	.image-view {
		position: relative;
		height: 300upx;
		width: 300upx;
		margin-left: 40upx;
	}

	.del {
		z-index: 200;
		position: absolute;
		top: -20upx;
		right: -20upx;
		font-size: 40upx;
		line-height: 1;
		width: 40upx;
		height: 40upx;
		border-radius: 40upx;
		align-items: center;
		justify-content: center;
		background-color: #FE0036;
		color: #FFFFFF;
	}

	.fabu {
		color: #FFFFFF;
		height: 80upx;
		background-image: linear-gradient(to right, #FF0033, #FF6666);
		justify-content: center;
		align-items: center;
		font-size: 32upx;
	}
</style>
